<template>
    <div class="layout">
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" active-name="1">
                    <div class="layout-logo"></div>
                    <div class="layout-nav">
                        <MenuItem   v-for="(item, index) in navRoute" :key="item.path" :name="index" >
                         <div class="menu-box" @click="handleClick(item)">
                            <Icon type="ios-navigate"></Icon>
                             {{ item.name }}
                         </div>
                        </MenuItem>
                    </div>
                </Menu>
            </Header>
            <Content :style="{padding: '0 50px'}">
                <Breadcrumb :style="{margin: '20px 0'}">
                    <BreadcrumbItem v-for="item in navRoute" :key="item.path">
                    <span @click="handleClick(item)">{{ item.name }}</span>
                    </BreadcrumbItem>
                </Breadcrumb>
                <Card>
                    <div style="height: 100%;">
                        <router-view></router-view>
                    </div>
                </Card>
            </Content>
            <Footer class="layout-footer-center"> </Footer>
        </Layout>
    </div>
</template>
<script>
import adminrouters from '../router/adminroutes.js'
export default {
  data () {
    return {
      navRoute: []
    }
  },
  created () {
    this.getNav()
  },
  methods: {
    getNav () {
      this.navRoute = adminrouters.filter(item => item.meta.isNav)
      console.log(this.navRoute)
    },
    handleClick (e) {
      this.$emit('handleClick', e)
    }
  }
}
</script>
<style lang='less'>
.layout{
    height: 100%;
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    .ivu-layout {
        height: 100%;
        .ivu-layout-content{
            height: calc(100% - 64px);
            .ivu-card{
                height: calc(100% - 80px);
            }
        }
    }
    .ivu-card-bordered{
        height: 94%;
    }
    .ivu-card-body{
      height: 100%;
      padding: 0;
    }
    .ivu-row{
        height: 100%;
        .ivu-col-span-6{
            height: 100%;
        }
    }
}
.layout-logo{
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
}
.layout-nav{
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
}

.layout-footer-center{
    text-align: center;
}

</style>
